<template>
	<view class="container-flex-auto">
		<Navbar title="余额明细" />

		<u-sticky bgColor="#fff">
			<!-- <view class="heander-panel">
				<text>我的余额：</text>
				<text class="font-bold ml-10 mr-10">3423</text>
				<text>金豆</text>
			</view> -->
			<u-tabs :list="tabsList" :lineColor="mainColor" @change="tabChange"></u-tabs>
		</u-sticky>

		<view class="content-flex-auto">
			<mescroll-uni ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view v-for="(item, index) in balanceList" :key="index" class="item-box">
					<!-- 消费记录 -->
					<view class="flex jc-between ai-center" v-show="activeKey === 1">
						<view style="width: 50%;">
							<template v-if="Number(item.change_num) > 0">
								<view class="font-24 font-color mb-10">{{ item.remark || '充值' }}</view>
							</template>
							<template v-else>
								<view class="font-24 font-color mb-10">{{ item.remark || '解锁剧集' }}</view>
							</template>
							<view class="font-24 font-color-3">
								{{ $u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss') }}
							</view>
						</view>
						<template v-if="Number(item.change_num) > 0">
							<text class="font-32 font-bold main-color">+{{ item.change_num }}</text>
						</template>
						<template v-else>
							<text class="font-32 font-bold" style="color: #6b6b6b;">{{ item.change_num }}</text>
						</template>
					</view>
					<!-- 充值记录 -->
					<view class="flex jc-between ai-center" v-show="[2,3].includes(activeKey)">
						<view style="width: 50%;">
							<view class="font-24 font-color mb-10">{{ item.order_no }}</view>
							<view class="font-24 font-color-3">
								{{ $u.timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss') }}
							</view>
						</view>
						<text class="font-32 font-bold main-color">￥{{ item.recharge_money }}</text>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
import Navbar from '@/components/navbar/navbar.vue'
import {
  queryUserCoinList,
  queryOrderCoinList,
  queryOrderVipList
} from '@/api/user.js'
export default {
  components: {
    MescrollUni,
    Navbar
  },
  mixins: [MescrollMixin, colorMixins],
  data() {
    return {
      total: 0,
      pageNum: 1,
      activeKey: 1,
      tabsList: [{
        name: '消费记录',
        key: 1,
      }, {
        name: '金币记录',
        key: 2,
      }, {
        name: '会员记录',
        key: 3,
      }],
      balanceList: [{
        ad_id: '0',
        appid: 'wx727723b79d7f3098',
        appname: '超级短剧',
        change_num: 10,
        change_reason: '购买都市之天降巨富第20集',
        changed_num: 85,
        invite_code: '643a6b1d09e298816084c8f7',
        middleman_id: '0',
        nickname: '好上头123',
        os_name: 'android',
        tfid: '643dfd1d819ce8bdcffb7312',
        type: 'expend',
        user_id: '63f7156f0c801c3e62387cd4',
        _add_time: 1682221242533,
        _id: '6444a8ba0c801ca878df1a45'
      }]
    }
  },
  onLoad(option) {},
  methods: {
    async upCallback(page) {
      const pageNum = page.num // 页码, 默认从1开始
      const pageSize = page.size // 页长, 默认每页10条
      this.pageNum = page.num

      let result = {}
      if (this.activeKey === 1) {
        // 消费记录
        const res = await queryUserCoinList({ pageNum: pageNum })
        result = res
      } else if (this.activeKey === 2) {
        // 金币充值
        const res = await queryOrderCoinList({ pageNum: pageNum })
        result = res
      } else if (this.activeKey === 3) {
        // 会员充值
        const res = await queryOrderVipList({ pageNum: pageNum })
        result = res
      }
     
      const {
        data,
        total
      } = result
      const curPageLen = data.length
      if (pageNum == 1) {
        this.balanceList = []
      }
      this.balanceList = this.balanceList.concat(data)
      this.total = total
     
      this.mescroll.endBySize(curPageLen, total)
    },

    reset() {
      this.mescroll.resetUpScroll()
    },

    tabChange(item) {
      this.activeKey = Number(item.key)
      this.balanceList = []
      this.reset()
    },

  }
}
</script>

<style lang="scss" scoped>
	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1
	}

	.heander-panel {
		background-color: $main-color;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.item-box {
		background-color: #fff;
		padding: 20rpx 24rpx;
		border-bottom: 2rpx solid #f8f8f8;
		font-size: 24rpx;
	}
</style>
